<template>
  <div class="swiper-box">
    <div class="img-tol">
      <h3 class="img-tit">{{ tit }}</h3>
      <span class="img-more">播放全部</span>
    </div>
    <div class="swiper-container-pl swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-font item" v-for="(item, index) in playlists" :key="item.id">
          <ul>
            <li class="swiper-box" @click="selectPli(item, index)">
              <div class="swiper-img">
                <img :src="item.image" class="swiper-imgs">
              </div>
              <div>
                <div class="item-box">
                  <h5 class="item-tit">{{ item.name }}</h5>
                  <p class="item-p">-{{ item.singer }}</p>
                  <p class="item-p1">{{ item.album }}</p>
                </div>
              </div>
              <div class="iconfont icon-tu" @click.stop="selectPdiv(item, index)" :class="[ item.name === currentSong.name ? 'iconbofang' : 'iconarrow-' ]"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 大盒子循环
      sums: '',
      flags: true
    }
  },
  props: {
    tit: {
      type: String
    },
    playlists: {
      type: Array,
      default: () => { return [] }
    }
  },
  methods: {
    selectPli (item, index) {
      console.log(this.$refs.iconfo)
      // console.log(9)
      this.$router.push('/clouds')
      this.selectPlay({
        list: this.playlists,
        index: index,
        flag: true
      })
      console.log(item)
      console.log(index)
    },
    selectPdiv (item, index) {
      // console.log(0)
      this.selectPlay({
        list: this.playlists,
        index: index,
        flag: false
      })
    },
    ...mapActions([
      'selectPlay'
    ]),
    ...mapMutations({
      setFullScreen: 'SET_FULL_SCREEN'
    })
  },
  computed: {
    ...mapGetters([
      'currentSong'
    ])
  },
  mounted () {
    // console.log(this.playlists)
    // 数据未接收前先不渲染
    var timerId = setInterval(() => {
      if (this.playlists.length > 0) {
        // console.log(Math.floor(this.playlists.length / 3))
        this.sums = Math.floor(this.playlists.length / 3)
        var mySwiper = new Swiper('.swiper-container-pl', {
          // 自动播放时间
          // autoplay: 3000,
          // 用户操作swiper之后，是否禁止autoplay。默认为true
          // autoplayDisableOnInteraction: false,
          // 循环播放
          // loop: true,
          // 滑动到底就开始翻页
          nested: true,
          // resistanceRatio: 0,
          // 默认开始显示第几页
          // initialSlide: 4,
          // slide之间的距离
          spaceBetween: 4,
          // loopedSlides: 8,
          // slidesPerView: 'auto',
          // 启动动态检查器默认为false
          // observer: true,
          // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。\
          // 纵向显示几个
          slidesPerColumn: 3,
          slidesPerColumnFill: 'column'
          // observerParents: true,
          // 每组显示个数
          // slidesPerView: 3
          // 分页器也就是小圆点
          // pagination: '.swiper-pagination'
        })
        console.log(mySwiper)
        clearInterval(timerId)
      }
    }, 200)
  }
}
</script>

<style lang="less" scoped>
ul,li,p {
  list-style: none;
  padding: 0;
  margin: 0;
}
.img-tol{
  width: 100%;
  padding: 0;
  height: 48px;
  line-height: 48px;
  .img-tit {
    float: left;
    margin: 0;
    display: inline-block;
    font-size: 16px;
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .img-more {
    float: right;
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin-top: 9px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
  }
}
/*.swiper-box {
  height: 78px;
}*/
.swiper-img {
  height: 47px;
  float: left;
  margin-right: 5px;
  .swiper-imgs {
    height: 100%;
    width: 46px;
    border-radius: 4px;
  }
}
.item-box {
  .item-tit {
    display: inline-block;
    margin: 0;
    position: relative;
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .item-p {
    display: inline-block;
    margin-left: 2px;
    max-width: 20%;
    font-size: 11px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.item-p1 {
  font-size: 11px;
}
.icon-tu {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 18px;
}

</style>
